<template>
  <div v-show="route.path!=='/liveRoom'&&visible" class="homeIndex-guide">
    <img @click="$router.push('/guide')" src="../assets/guide.png">
    <span @click="closeGuide" class="close-guide">+</span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      visible: true
    }
  },
  computed: {
    route () {
      return this.$route
    }
  },
  watch: {
    value (val) {
      this.visible = val
    },
    visible (val) {
      this.$emit('input', val)
    }
  },
  methods: {
    closeGuide () {
      this.visible = false
    }
  }
}
</script>

<style scoped lang="scss">
.homeIndex-guide {
  position: fixed;
  z-index: 1;
  right: 30px;
  top: 86px;
  cursor: pointer;
  .close-guide {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    transform: rotate(135deg);
  }
  img {
    animation: scaleDraw 5s ease-in-out infinite;
  }
}
@keyframes scaleDraw {
  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(1); /*开始为原始大小*/
  }
  25% {
    transform: scale(1.1); /*放大1.1倍*/
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
}
</style>
